<template>
  
  <div class="container">
    <header>
      <h2 class="text-center">Todos</h2>
      <input-component></input-component>
    </header>
    <todos-component :tab="tab"></todos-component>
    <footer>
      <filter-component v-on:change-tab="changeTab" :tab="tab"></filter-component>
    </footer>
  </div>

</template>

<style>
  .container {
    width: 400px;
    margin: 0 auto;
  }
  header, footer {
    margin: 20px;
  }
  ul {
    margin: 0;
    list-style-type: none;
  }
</style>

<script>
  import InputComponent from '@c/input-component'
  import TodosComponent from '@c/todos-component'
  import FilterComponent from '@c/filter-component'

  export default {
    data () {
      return {
        tab: 'allTodos'
      }
    },
    components: {
      InputComponent,
      TodosComponent,
      FilterComponent
    },
    methods: {
      changeTab (tab) {
        this.tab = tab
      }
    }
  }


</script>